<template>
  <div>
    <span>获取验证码({{ time }}s)</span>
  </div>
</template>

<script name="Countdown" setup lang="ts">
//引入组合式API函数ref
import { ref, watch } from "vue";

// 接受父组件传递过来的props->flag:用于控制计数器组件显示与隐藏的
// 报错：Uncaught (in promise) ReferenceError: Cannot access 'props' before initialization
// 理解：在初始化之前无法访问'props'，可以粗暴的理解为当我访问'props'时，该变量并未被声明。
// 解决：将声明方法的语句放在访问方法之前。
let props = defineProps(["flag"]);
let $emit = defineEmits(['getFlag']);

// 倒计时的事件
let time = ref<number>(9);

// 监听父组件传递过来props数据变化
watch(
  () => props.flag,
  () => {
    // 开启定时器
    let timer = setInterval(() => {
      time.value--;
      if (time.value == 0) {
        // 通知父组件倒计时模式结束
        $emit('getFlag', false);
        // 清除定时器
        clearInterval(timer);
      }
    }, 1000);
  },
  {
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>

</style>
